<!doctype html>
<html class="home">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>select2-bootstrap-theme</title>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="select2/css/select2.css">
		<link rel="stylesheet" href="select2/css/select2-bootstrap.css">
		<!--[if lt IE 9]>
		<script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="js/respond.min.js"></script>
	<![endif]-->
	</head>

	<body>
		<div class="jumbotron">
			<div class="container">
				<select id="sel_menu1" class="form-control">
					<option></option>
					<optgroup label="系统设置">
						<option value="1">用户管理</option>
						<option value="2">角色管理</option>
						<option value="3">部门管理</option>
						<option value="4">菜单管理</option>
					</optgroup>
					<optgroup label="订单管理">
						<option value="5">订单查询</option>
						<option value="6">订单导入</option>
						<option value="7">订单删除</option>
						<option value="8">订单撤销</option>
					</optgroup>
					<optgroup label="基础数据">
						<option value="9">基础数据维护</option>
					</optgroup>
				</select>

				<select id="sel_menu2" multiple="multiple" class="form-control">
					<optgroup label="系统设置">
						<option value="1">用户管理</option>
						<option value="2">角色管理</option>
						<option value="3">部门管理</option>
						<option value="4">菜单管理</option>
					</optgroup>
					<optgroup label="订单管理">
						<option value="5">订单查询</option>
						<option value="6">订单导入</option>
						<option value="7">订单删除</option>
						<option value="8">订单撤销</option>
					</optgroup>
					<optgroup label="基础数据">
						<option value="9">基础数据维护</option>
					</optgroup>
				</select>

				<select id="sel_menu3" multiple="multiple" class="form-control"></select>

				<select class="form-control js-data-example-ajax"></select>

				<button class="btn btn-danger btn-block" id="btn">点击获取</button>
			</div>
		</div>

		<script src="select2/js/jquery.min.js"></script>
		<script src="select2/js/select2.full.js"></script>
		<script src="select2/js/i18n/zh-CN.js"></script>

		<script>
			$.fn.select2.defaults.set("theme", "bootstrap");
			$.fn.select2.defaults.set("language", "zh-CN");
			var placeholder = "请选择...";


		function formatRepo(repo) {
				if(repo.loading) return repo.text;

				var markup = "<div class='select2-result-repository clearfix'>" +
					"<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
					"<div class='select2-result-repository__meta'>" +
					"<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

				if(repo.description) {
					markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
				}

				markup += "<div class='select2-result-repository__statistics'>" +
					"<div class='select2-result-repository__forks'><span class='glyphicon glyphicon-flash'></span> " + repo.forks_count + " Forks</div>" +
					"<div class='select2-result-repository__stargazers'><span class='glyphicon glyphicon-star'></span> " + repo.stargazers_count + " Stars</div>" +
					"<div class='select2-result-repository__watchers'><span class='glyphicon glyphicon-eye-open'></span> " + repo.watchers_count + " Watchers</div>" +
					"</div>" +
					"</div></div>";

				return markup;
			}

			function formatRepoSelection(repo) {
				return repo.full_name || repo.text;
			}



			$(".js-data-example-ajax").select2({
				ajax: {
					url: "https://api.github.com/search/repositories",
					dataType: 'json',
					delay: 250,
					data: function(params) {
						return {
							q: params.term, // search term
							page: params.page
						};
					},
					processResults: function(data, params) {
						// parse the results into the format expected by Select2
						// since we are using custom formatting functions we do not need to
						// alter the remote JSON data, except to indicate that infinite
						// scrolling can be used
						params.page = params.page || 1;

						return {
							results: data.items,
							pagination: {
								more: (params.page * 30) < data.total_count
							}
						};
					},
					cache: true
				},
				escapeMarkup: function(markup) {
					return markup;
				}, // let our custom formatter work
				placeholder: "搜索....", //提示
				minimumInputLength: 1,
				templateResult: formatRepo, // omitted for brevity, see the source of this page
				templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
			});

		
			var v1 = $("#sel_menu1").select2({
				allowClear: true, //删除按钮
				placeholder: placeholder, //提示
				width: null, //宽度为空
				selectOnClose: false, //高亮显示
				closeOnSelect: true, //选择后，是否自动关闭下拉框
				//tags:true,//自定义标签
				delay: 250,//加载延时
				//maximumInputLength: 20, //最大允许字符数
				//maximumSelectionLength: 2,//对于多选，最多选择2个
				//minimumResultsForSearch: 20, // 最少显示20个搜索结果
				//minimumResultsForSearch: Infinity,//隐藏搜索框
				//minimumInputLength,最少输入长度
				//tokenSeparators: [',', ' '],//配置tags使用，触发哪个字符添加一个tags，此处为逗号和空格
				//language: "es",//语言，可以定义全局
				//dir: "rtl",//RTL模式
				//theme: "classic",//皮肤模板
				//templateResult:function,//返回结果回调
				//templateSelection: function,//下拉内容数据模板
				//containerCssClass: ':all:'//css选择器:all:是所有
			});

			var v2 = $("#sel_menu2").select2({
				placeholder: placeholder,
				maximumSelectionSize: 6,
				containerCssClass: ':all:'
			});

			var tags = $("#sel_menu3").select2({
				placeholder: placeholder,
				tags: true
			});

			$("#btn").click(function() {
				console.log(v1.val())
				console.log(v2.val())
				console.log(tags.val())
			})
		</script>

	</body>

</html>